<template>
    <div>
        <h1 :style="{opacity}">News内容</h1>
        <ul>
            <li v-for="item in newsList" :key="item.id">
                <router-link :to="{
            //params传参不可以用path,必须使用name
            // path: '/home/news/detail',
            name: 'xiangqing',
            params: { id: item.id, title: item.title }
        }">{{ item.title }}</router-link>
                <input type="text">
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: "xingwen",
    data() {
        return {
            opacity: 1,
            newsList: [
                {
                    id: "001",
                    title: "news001"
                },
                {
                    id: "002",
                    title: "news002"
                },
                {
                    id: "003",
                    title: "news003"
                }
            ]
        }
    },
    mounted() {
     
    },
    //nextTick: 组件下一次刷新时调用
    //activated: 组件活跃时调用 
    //deactivated: 组件失活时调用 
    activated(){
        this.timer = setInterval(()=>{
            if (this.opacity <= 0) {
                this.opacity = 1
            } else {
                this.opacity -= 0.001
            }
            console.log(this.opacity)
        }, 0.01)
    },
    deactivated(){
        clearInterval(this.timer)
    }
}
</script>

<style></style>